import 'package:ceramics/extensions/ab_widget_extensions.dart';
import 'package:ceramics/model/ab_singleton.dart';
import 'package:ceramics/model/ab_works.dart';
import 'package:ceramics/pages/main/ab_main_tab_page.dart';
import 'package:ceramics/pages/main/hot/ab_hot_works_item.dart';
import 'package:ceramics/pages/main/mine/ab_about_page.dart';
import 'package:ceramics/pages/main/mine/ab_block_list_page.dart';
import 'package:ceramics/pages/main/mine/widgets/ab_coin_widget.dart';
import 'package:ceramics/styles/ab_styles.dart';
import 'package:ceramics/util/ab_api.dart';
import 'package:ceramics/util/ab_loading.dart';
import 'package:ceramics/widgets/ab_elevate_button.dart';
import 'package:ceramics/widgets/ab_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';

import 'ab_coin_shop_page.dart';
import 'ab_follow_list_page.dart';
import 'ab_setting_profile_page.dart';
import 'ab_system_setting_page.dart';


class ABMineController extends GetxController {

  var works = <ABWorks>[].obs;

  @override
  void onInit() {
    super.onInit();
    loadData();
  }

  loadData() async {
    await api.fetchCoin();
    update();
  }

  fetchMyWorks() async {
     works.value = await ABWorks.worksWithUserId(ABSingleton.user!.userId);
     update();
  }
}

class ABMinePage extends GetView<ABMineController> {
  const ABMinePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: const Color(0x00FFFFFF),
        actions: [
          IconButton(
              icon: Image.asset('images/ceramics_78.webp', width: 26),
              onPressed: () {
                Get.to(() => const ABSystemSettingPage());
              })
        ],
      ),
      body: GetBuilder<ABMineController>(
        assignId: true,
        builder: (logic) {
          return Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage("images/ceramics_39.webp"),
                fit: BoxFit.cover,
              ),
            ),
            child: SafeArea(
              child: ListView(
                  padding: const EdgeInsets.symmetric(horizontal: 20),
                  children: [
                    _buildInfoTile(),
                    8.toVerticalBox,
                    const ABCoinWidget().onTap(() =>
                        Get.to(() => const ABCoinShopPage())),
                    20.toVerticalBox,
                    _buildGift(),
                    20.toVerticalBox,
                    _buildMenus(),
                    if (controller.works.isNotEmpty)
                    _buildWorksList()
                  ]),
            ),
          );
        },
      ),
    );
  }

  Container _buildGift() {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(color: ABStyles.darkBlack, width: 1),
        borderRadius: BorderRadius.circular(10),
      ),
      padding: const EdgeInsets.all(10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Column(
            children: [
              Container(
                  decoration: const BoxDecoration(
                    color: Color(0xFFF6f6f6),
                    borderRadius:
                    BorderRadius.all(Radius.circular(10)),
                  ),
                  child: Image.asset('images/ceramics_33.webp',
                      width: 50)),
              3.toVerticalBox,
              Text('x 0'.tr, style: ABStyles.tsDartPick15R),
            ],
          ),
          Column(
            children: [
              Container(
                  decoration: const BoxDecoration(
                    color: Color(0xFFF6f6f6),
                    borderRadius:
                    BorderRadius.all(Radius.circular(10)),
                  ),
                  child: Image.asset('images/ceramics_27.webp',
                      width: 50)),
              3.toVerticalBox,
              Text('x 0'.tr, style: ABStyles.tsDartPick15R),
            ],
          ),
          Column(
            children: [
              Container(
                  decoration: const BoxDecoration(
                    color: Color(0xFFF6f6f6),
                    borderRadius:
                    BorderRadius.all(Radius.circular(10)),
                  ),
                  child: Image.asset('images/ceramics_54.webp',
                      width: 50)),
              3.toVerticalBox,
              Text('x 0'.tr, style: ABStyles.tsDartPick15R),
            ],
          ),
          Column(
            children: [
              Container(
                  decoration: const BoxDecoration(
                    color: Color(0xFFF6f6f6),
                    borderRadius:
                    BorderRadius.all(Radius.circular(10)),
                  ),
                  child: Image.asset('images/ceramics_16.webp',
                      width: 50)),
              3.toVerticalBox,
              Text('x 0'.tr, style: ABStyles.tsDartPick15R),
            ],
          )
        ],
      ),
    );
  }

  ListTile _buildInfoTile() {
    return ListTile(
      contentPadding: EdgeInsets.zero,
      title: Text(ABSingleton.user?.nickname ?? '',
          style: ABStyles.tsDarkBlack17Bold),
      leading: ABCircleAvatar(url: ABSingleton.user?.avatar, size: 50),
      subtitle: Row(
        children: [
          Text('ID: ${ABSingleton.user?.userId}',
              style: ABStyles.tsLightBlack15).expand(),
          5.toHorizontalBox,
          Image.asset('images/ceramics_80.webp', width: 25).onTap(() {
            Clipboard.setData(ClipboardData(text: ABSingleton.user!.userId));
            toast('copied');
          }),
          15.toHorizontalBox
        ],
      ).padSymmetric(vertical: 8),
      trailing: ABElevateButton(onPressed: () {
        Get.to(()=>const ABSettingProfilePage());
      }, child: Text('Edit'.tr))
          .size(width: 70, height: 30),
    );
  }

  Widget _buildMenus() {
    return Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          border: Border.all(color: ABStyles.darkBlack, width: 1),
        ),
        padding: const EdgeInsets.all(10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Column(
              children: [
                Container(
                    decoration: const BoxDecoration(
                      color: Color(0xFFF6f6f6),
                      borderRadius:
                      BorderRadius.all(Radius.circular(10)),
                    ),
                    child: Image.asset('images/ceramics_24.webp',
                        width: 50)),
                5.toVerticalBox,
                Text('follow list'.tr, style: ABStyles.tsNormalBlack15),
              ],
            ).onTap(() => Get.to(() => const ABFollowListPage())),
            Column(
              children: [
                Container(
                    decoration: const BoxDecoration(
                      color: Color(0xFFF6f6f6),
                      borderRadius:
                      BorderRadius.all(Radius.circular(10)),
                    ),
                    child: Image.asset('images/ceramics_72.webp',
                        width: 50)),
                5.toVerticalBox,
                Text('Blacklist'.tr, style: ABStyles.tsNormalBlack15),
              ],
            ).onTap(() => Get.to(() => const ABBlockListPage())),
            Column(
              children: [
                Container(
                    decoration: const BoxDecoration(
                      color: Color(0xFFF6f6f6),
                      borderRadius:
                      BorderRadius.all(Radius.circular(10)),
                    ),
                    child: Image.asset('images/ceramics_88.webp',
                        width: 50)),
                5.toVerticalBox,
                Text('About'.tr, style: ABStyles.tsNormalBlack15),
              ],
            ).onTap(() => Get.to(() => const ABAboutPage())),

          ],
        )
    );
  }

  Widget _buildWorksList() {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        20.toVerticalBox,
        Image.asset('images/ceramics_18.png'),
        Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(10),
            border: Border.all(color: ABStyles.darkBlack, width: 1),
          ),
          padding: const EdgeInsets.all(10),
          child: ListView.separated(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemCount: controller.works.length,
              itemBuilder: (ctx, idx) {
                var model = controller.works[idx];
                return ABHotWorksItem(works: model);
              },
              separatorBuilder: (ctx, idx) {
                return const Divider(height: 1, color: Colors.grey);
              }),
        ),
      ],
    );
  }
}
